<template>
	<view class="item_bg" @tap="check">
		<u-image
			width="190"
			height="190"
			border-radius="20"
			:src="item.thumb"
		></u-image>
		<view class="right_part">
			<view class="title">{{ item.title }}</view>
			<view class="time">
				<u-icon name="clock-fill" color="#3AB54A" size="30"></u-icon>
				<text>{{ item.time }}分钟</text>
			</view>
			<view class="price">
				<text class="now">{{ vk.pubfn.priceFilter(item.price) }}</text>
				<text class="before" v-if="show">
					￥{{ vk.pubfn.priceFilter(item.market_price) }}
				</text>
				<text style="flex: 1;text-align: right">已售 {{ item.sell_count || "0" }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "service-item",
	props: {
		item: {
			Type: Object
		}
	},
	computed: {
		show() {
			return this.item.market_price > this.item.price
		}
	},
	methods: {
		check() {
			vk.navigateTo(`/pages/project/detail?_id=${this.item._id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.item_bg {
	border-radius: 12rpx;
	background-color: #fff;
	padding: 24rpx;
	margin: 16rpx 20rpx;
	display: flex;
	align-items: center;
}

.right_part {
	flex: 1;
	padding-left: 22rpx;
}

.title {
	font-size: 30rpx;
	line-height: 42rpx;
	color: #333333;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.time {
	font-size: 24rpx;
	display: flex;
	align-items: center;
	padding: 10rpx 0 26rpx;
	.u-icon {
		margin-right: 6rpx;
	}
}

.price {
	font-size: 22rpx;
	color: #999999;
	display: flex;
	align-items: baseline;
	.now {
		font-size: 34rpx;
		color: #ff5555;
		&::before {
			content: "￥";
			font-size: 22rpx;
		}
	}
	.before {
		text-decoration: line-through;
		font-size: 24rpx;
		padding-left: 10rpx;
	}
}
</style>
